<template>
    <div class="comp" ref="crosswise"> <!-- 放置图表的位置 --></div>
</template>

<script  setup>
// 1.引入基础模块（echarts api）
import { inject, ref, onMounted, onBeforeUnmount } from "vue"
import themeStore from "../store/index.js"
const store = themeStore()
const echarts = inject('echarts')
const api = inject('api')

// 2.初始化页面数据
let crosswise = ref(null)//初始化图表容器ref值
let echartsInstance = null//初始化echarts实例对象
let allData = []//初始化业务数据

// react redux
store.$subscribe((mutation, state) => {
    echartsInstance.dispose()// 清除旧的echarts实例
    initEcharts()//创建新实例
    editEcharts()//根据数据继续完善
    // window.addEventListener('resize', Adaptation)//开启窗口变化监听
    Adaptation()
})

// 3.获取echarts绘图实例 设置基础配置项 完成基础图表绘制
function initEcharts() {
    // 3.1获取实例
    echartsInstance = echarts.init(crosswise.value, store.themeName)
    // 3.2设置基础配置项
    let initOptions = {
        title: {
            text: "▍各地区农业种植面积统计top10",
            top: "3%",
            left: "3%"
        },
        grid: {
            show: false,
            top: "12%",
            left: "3%",
            right: "3%",
            bottom: "3%",
            containLabel: true
        },
        tooltip: {},
        xAxis: {
            type: "value"
        },
        yAxis: {
            type: "category"
        },
        series: [
            {
                type: "bar",
                label: {
                    show: true,
                    position: "right"
                },
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [{
                            offset: 1, color: 'orange' // 0% 处的颜色
                        }, {
                            offset: 0, color: 'orangered' // 100% 处的颜色
                        }]
                    }
                }
            }
        ]
    }
    // 3.3完成基础图表绘制
    echartsInstance.setOption(initOptions)
}

// 4.获农业种植面积数据
async function getData() {
    let { data } = await api('plantingAreaTop')
    allData = data
    editEcharts()
}

// 5.根据业务继续完善绘图配置项 完善图表
function editEcharts() {
    // 5.1设置绘图配置项
    let editOptions = {
        yAxis: {
            data: allData.map(item => item.name)
        },
        series: [
            {
                data: allData.map(item => item.area)
            }
        ]
    }
    // 5.2使用配置项完善图表 合拼新旧配置项
    echartsInstance.setOption(editOptions)
}

// 6.图表适配方法 坐标系内的  坐标系外的（自己处理）
function Adaptation() {
    console.log('触发了横向适配')
    // ------------------手动处理适配-------------------
    // 获取自定义比例尺  获取当前图表容器的宽度/100*3.5-3.7(3.6)
    let width = crosswise.value.offsetWidth
    let scale = width / 100 * 3.6

    // 6.1设置基础配置项
    let initOptions = {
        title: {
            textStyle: {
                fontSize: scale
            },
        },
        series: [
            {
                barWidth: scale,
                itemStyle: {
                    borderRadius: [0, scale / 2, scale / 2, 0]
                }
            }
        ]
    }
    // 6.2完成基础图表绘制
    echartsInstance.setOption(initOptions)
    // -----------------坐标系内适配----------------------
    // 6.3
    echartsInstance.resize()
}


// 组件挂载完毕执行业务逻辑
onMounted(() => {
    initEcharts()
    getData()
    window.addEventListener('resize', Adaptation)//开启窗口变化监听
    Adaptation()
})

// 组件销毁移除  防止内存泄露  
onBeforeUnmount(() => {
    window.removeEventListener('resize', Adaptation)
})

// 暴露导出适配方法(宏命令 不需要引入就可以使用)
defineExpose({
    Adaptation
})


</script>

<style scoped></style>